<template>
    <el-collapse class="my-collapse" v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="(item,index) in data" :key="index" :name="index">
            <!-- title 需要取 代表性的字段，并且只能有TEXT -->
            <template #title>
                <Description  size="default" :field-list="fieldList.slice(0,descriptionColumn)"
                    :column="descriptionColumn" :data="item" :border="true"></Description>
            </template>
            <template #default>
                
                <Description 
                
                size="default" 
                :field-list="fieldList1"
                :column="descriptionColumn" 
                :data="item" 
                :border="true"  
                :show-button="true" 
                :inCollapse="true"
                >
                <template #button="slotProps"><slot name="button" :collapseItem="slotProps.descriptionData"></slot></template>

             </Description>
             <div v-for="datalong in fieldList2">
                <Description 
                
                size="default" 
                :field-list="datalong"
                :column="descriptionColumn" 
                :data="item" 
                :border="true"  
                :show-button="true" 
                :inCollapse="true"
                >           
            </Description>
             </div>

           
            </template>
        </el-collapse-item>

    </el-collapse>
</template>
    
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import Description from '@/components/common/description/Description.vue'
import { column } from 'element-plus/es/components/table-v2/src/common';
import {Field,OperationAttribute,Attribute} from '@/components/common/horizontalMeau/AttributeInterface'
/**
 * 组件描述:
 *    根据 data（数组对象），fieldList 构成一个可以下拉的列表
 *    与table 类似 可以同时承载多个对象  
 * 
 *descriptionColumn解释:
 *    以默认值 descriptionColumn = 2为例
 *    前两个元素设置为 collapse 的 title
 *    余下元素设置 content
 */



const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

const props = defineProps({
    data: {
        type: Object,
        default: () => ([])
    },
    fieldList: {
        type: Object,
        default: () => ([] )
    },
    border: {
        type: Boolean,
        default: false
    },

    // 列数
    descriptionColumn: {
        type: Number,
        default: 2
    },

    operation: {
        type: Object,
        default: () => ({})
    }
})
// const fieldList1=reactive(Array<any>)
// const fieldList2=reactive(Array<any>)
    let fieldList2: any = []
    let fieldList1: any = []

onMounted(() => {
    console.log(props.data);
    // 判断长文本
    let temp:Array<any> = props.fieldList as Array<any> ;
    let sliceArr=temp.slice(props.descriptionColumn)
    sliceArr.forEach(item =>{
        if (item.type=='LONGTEXT'||item.type == 'LONGIMAGE') {
          let arr: any = []
arr.push(item)
        fieldList2.push(arr)
        }else{
            fieldList1.push(item)

        }   

    })
    console.log(fieldList1,fieldList2,'wdwdw');

})


// 计算 单个元素的 label宽和value宽
let singleItemPercent = 100 / props.descriptionColumn
let labelWidth = (singleItemPercent * 0.5) + "%"
let valueWidth = (singleItemPercent * 0.5) + "%"






</script>
    
<style scoped>
/* el-descriptions__header 会有默认的底部边缘值，此处去除 */
.my-collapse>>>.el-descriptions__header {
    margin-bottom: 0px;
}



/* 将页面的所有label 的宽度都为单个item宽度的0.3，由于上述两步操作使得 description 的宽度一致，页面整体的label 宽度一致 */
.my-collapse>>>.el-descriptions__cell.el-descriptions__label {
    width: v-bind('labelWidth');
}
/* 将页面的所有label 的宽度都为单个item宽度的0.7 */
.my-collapse>>>.el-descriptions__cell.el-descriptions__content {
    width: v-bind('valueWidth');
}
.my-collapse>>>.el-collapse-item__header.is-active .el-descriptions__cell.el-descriptions__content{
    background-color: #ee8e4f;
}
.my-collapse>>>.el-collapse-item__header.is-active .el-descriptions__cell.el-descriptions__cell.el-descriptions__label{
    background-color: #ee8e4f;
}



</style>